<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useBannerStore, useProductStore, useUserStore } from '@/stores';

const products = ref<any>([]);
const categoryGroups = ref<any>([]);
const bannerStore = useBannerStore();
const productStore = useProductStore();
const userStore = useUserStore();
const topBanners = ref<any>([]);
const middleBanners = ref<any>([]);
const couponBanners = ref<any>([]);
const activityBanners = ref<any>([]);
const discountBanners = ref<any>([]);

onLoad(async () => {
	// 商品分类
	const groups = [];
	const data = await productStore.getCategories();
	for (let i = 0; i < data.length; i += 5) {
		let parts = data.slice(i, i + 5);
		if (parts.length < 5) {
			parts = [...parts, ...new Array(5 - parts.length).fill(null)];
		}
		groups.push(parts);
	}
	categoryGroups.value = groups;

	products.value = await productStore.getProducts();
	topBanners.value = (await bannerStore.getBanners({ positionId: 1 })).map((item: any) => {
		return {
			id: item.id,
			url: item.image?.url
		};
	});
	middleBanners.value = (await bannerStore.getBanners({ positionId: 2 })).map((item: any) => {
		return {
			id: item.id,
			url: item.image?.url
		};
	});
	couponBanners.value = (await bannerStore.getBanners({ positionId: 6 })).map((item: any) => {
		return {
			id: item.id,
			url: item.image?.url
		};
	});
	activityBanners.value = (await bannerStore.getBanners({ positionId: 7 })).map((item: any) => {
		return {
			id: item.id,
			url: item.image?.url
		};
	});
	discountBanners.value = (await bannerStore.getBanners({ positionId: 8 })).map((item: any) => {
		return {
			id: item.id,
			url: item.image?.url
		};
	});
});

function toProductList() {
	uni.switchTab({
		url: '/pages/product-list/product-list'
	});
}

function toLogin() {
	uni.navigateTo({
		url: '/pages/login/login'
	});
}

function toProductDetail(item: any) {
	uni.navigateTo({
		url: '/pages/product/product?id=' + item.id
	});
}
</script>

<template>
	<x-container direction="vertical" padding="0 30rpx" gap="20rpx">
		<x-title-bar>
			<dlk-position></dlk-position>
		</x-title-bar>
		<dlk-search placeholder="搜索商品：绘画" @ok="toProductList"></dlk-search>
	</x-container>
	<view style="margin-top: 20rpx">
		<x-swiper :items="topBanners" :height="360"></x-swiper>
	</view>
	<!-- 登录 -->
	<x-container padding="0 30rpx" bg-color="#2B2E33" height="80rpx" justify="between" align="center">
		<x-space align="center">
			<x-avatar width="50rpx" height="50rpx" :src="userStore.user.avatarUrl"></x-avatar>
			<x-text color="#D3AC66" :size="20" v-if="!userStore.isLogin">Hey，来跟大蓝卡打个招呼</x-text>
			<x-text color="#D3AC66" :size="20" v-else>您好，{{ userStore.user.nickName }}</x-text>
		</x-space>
		<x-text color="#D3AC66" :size="20" @tap="toLogin" v-if="!userStore.isLogin">登录/注册</x-text>
	</x-container>
	<!-- 商品分类 -->
	<view class="product-category">
		<x-row justify="space-between" v-for="categories in categoryGroups">
			<x-col flex="100rpx" v-for="item in categories" @tap="toProductList">
				<x-text-icon type="store" v-if="item">{{ item.name }}</x-text-icon>
			</x-col>
		</x-row>
	</view>
	<x-container direction="vertical" gap="32rpx" bg-color="#F6F6F6" padding="32rpx">
		<!-- 广告图片 -->
		<x-swiper :items="middleBanners" :height="200"></x-swiper>
		<!-- 我的优惠券 -->
		<x-card>
			<x-container gap="24rpx" direction="vertical">
				<x-container justify="between" align="center">
					<x-text color="#333333" :size="30">我的优惠区</x-text>
					<x-text color="#666666" :size="24">查看全部</x-text>
				</x-container>
				<x-row :gutter="24">
					<x-col :span="12">
						<x-image mode="widthFix" :src="couponBanners[0]?.url"></x-image>
					</x-col>
					<x-col :span="12">
						<x-space direction="vertical">
							<x-image height="167rpx" :src="couponBanners[1]?.url"></x-image>
							<x-image height="167rpx" :src="couponBanners[2]?.url"></x-image>
						</x-space>
					</x-col>
				</x-row>
			</x-container>
		</x-card>
		<!-- 活动区 -->
		<x-card>
			<x-container gap="24rpx" direction="vertical">
				<x-container justify="between" align="center">
					<x-text color="#333333" :size="30">活动区</x-text>
					<x-text color="#666666" :size="24">查看全部</x-text>
				</x-container>
				<x-space direction="vertical">
					<x-image width="630rpx" height="160rpx" :src="activityBanners[0]?.url"></x-image>
					<x-image width="630rpx" height="160rpx" :src="activityBanners[1]?.url"></x-image>
					<x-image width="630rpx" height="160rpx" :src="activityBanners[2]?.url"></x-image>
				</x-space>
			</x-container>
		</x-card>
		<!-- 特价/全场五折区 -->
		<x-card>
			<x-container gap="24rpx" direction="vertical">
				<x-container justify="between" align="center">
					<x-text color="#333333" :size="30">特价/全场五折区</x-text>
					<x-text color="#666666" :size="24">查看全部</x-text>
				</x-container>
				<x-row :gutter="24">
					<x-col :span="12">
						<x-image mode="widthFix" :src="discountBanners[0]?.url"></x-image>
					</x-col>
					<x-col :span="12">
						<x-space direction="vertical">
							<x-image height="167rpx" :src="discountBanners[1]?.url"></x-image>
							<x-image height="167rpx" :src="discountBanners[2]?.url"></x-image>
						</x-space>
					</x-col>
				</x-row>
			</x-container>
		</x-card>
		<x-divider title="甄选商品" :title-style="{ fontSize: '32rpx' }"></x-divider>
		<!-- 甄选商品 -->
		<x-grid :cols="2">
			<x-grid-item v-for="product in products" @tap="toProductDetail(product)">
				<dlk-product :model="product"></dlk-product>
			</x-grid-item>
		</x-grid>
	</x-container>
</template>

<style lang="scss" scoped>
.product-category {
	padding: 32rpx;
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}

.card {
}
</style>
